<template>
  <div>
    <el-card>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">学员ID:</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.user"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">姓名 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.name"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">姓拼音 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.last_py"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">名拼音 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.first_py"
                    @input="inputSearch"></el-input>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">出生日期 :</span>
          <el-date-picker
              size="small"
              class="inputWidth"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              v-model="query.birthday"
              @change="search"
          ></el-date-picker>
        </div>
        <div class="searchParams"><span class="spanWidth">证件类型 :</span>
          <el-select
              size="small"
              class="inputWidth"
              v-model="query.card_type"
              placeholder="请选择证件类型"
              @change="search"
              clearable
          >
            <el-option
                v-for="item in cardOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">证件号码 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.card_id"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">电子邮箱 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.email"
                    @input="inputSearch"></el-input>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">手机号码 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.phone"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">毕业年份 :</span>
          <el-date-picker
              size="small"
              type="month"
              class="inputWidth"
              @change="search"
              format="yyyy 年 MM 月"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              v-model="query.grad_time"

          ></el-date-picker>
        </div>
        <div class="searchParams"><span class="spanWidth">最高学历 :</span>
          <el-select
              size="small"
              v-model="query.hig_edu"
              placeholder="最高学历"
              @change="search"
              class="inputWidth"
              clearable
          >
            <el-option label="研究生及以上" value="研究生及以上"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="专科" value="专科"></el-option>
            <el-option label="其他" value="其他"></el-option>
            <el-option label="研究生及以上（在读）" value="研究生及以上（在读）"></el-option>
            <el-option label="本科（在读）" value="本科（在读）"></el-option>
            <el-option label="专科（在读）" value="专科（在读）"></el-option>
            <el-option label="其他（在读）" value="其他（在读）"></el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">相关专业 :</span>
          <el-select
              size="small"
              v-model="query.major"
              placeholder="相关专业"
              @change="search"
              clearable
              class="inputWidth"
          >
            <el-option label="人力资源管理" value="人力资源管理"></el-option>
            <el-option label="工商管理" value="工商管理"></el-option>
            <el-option label="行政管理" value="行政管理"></el-option>
            <el-option label="会计" value="会计"></el-option>
            <el-option label="财政、税务" value="财政、税务"></el-option>
            <el-option label="财政管理" value="财政管理"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </div>

      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">工作区域(省) :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.province"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">工作区域(市) :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.city"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">工作区域(区) :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.dis"
                    @input="inputSearch"></el-input>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">单位类型 :</span>
          <el-select
              style="width: 320px; margin-right: 20px"
              size="small"
              v-model="query.com_type"
              placeholder="请选择单位类型"
              @change="search"
              clearable
          >
            <el-option
                v-for="item in com_typeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">行业类型 :</span>
          <el-select
              size="small"
              v-model="query.ind_type"
              placeholder="请选择行业类型"
              @change="search"
              clearable
          >
            <el-option
                v-for="item in ind_typeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">单位名称 :</span>
          <el-input size="small" style="width: 300px" clearable v-model="query.com_name"
                    @input="inputSearch"></el-input>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span>从事薪酬管理（含薪税服务）工作年限（含实习经历） :</span>
          <el-col :span="8">
            <el-input
                oninput="value=value.replace(/[^0-9.]/g,'')"
                size="small"
                type="number"
                v-model="query.work_age"
                @input="inputSearch"
                clearable
            ></el-input>
          </el-col>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">职务 :</span>
          <el-select
              style="width: 420px"
              size="small"
              v-model="query.work_duty"
              placeholder="请选择职务"
              @change="search"
              clearable
          >
            <el-option
                v-for="item in work_dutyList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="searchParams"><span style="width: 120px">相关资质或证书 :</span>
          <el-select
              size="small"
              style="width: 380px;"
              v-model="query.cert"
              placeholder="请选择"
              @change="search"
              clearable
          >
            <el-option
                v-for="item in certDisplayOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="searchRow" v-show="$store.state.user_type == 3">
        <div class="searchParams"><span class="spanWidth">报名机构 :</span>
          <el-select
              size="small"
              v-model="query.org"
              placeholder="请选择单位类型"
              @change="search"
              clearable
          >
            <el-option
                v-for="item in orgList"
                :key="item.id"
                :label="item.org_name"
                :value="item.org_code"
            ></el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">报考机构 :</span>
          <el-select
              size="small"
              v-model="query.exam_org"
              placeholder="请选择单位类型"
              @change="search"
              clearable
          >
            <el-option
                v-for="item in orgList"
                :key="item.id"
                :label="item.org_name"
                :value="item.org_code"
            ></el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">补考次数:</span>
          <el-col :span="8">
            <el-input
                oninput="value=value.replace(/[^0-9.]/g,'')"
                size="small"
                type="number"
                v-model="query.make_up_count"
                @change="search"
            ></el-input>
          </el-col>
        </div>
      </div>
      <div class="searchRow">


        <!--        <div class="searchParams"><span>合同签署 :</span>-->
        <!--          -->
        <!--        </div>-->
      </div>
      <div class="searchRow">

        <div class="searchParams"><span class="spanWidth">准考证号 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.exam_code"
                    @input="inputSearch"></el-input>
        </div>
        <div class="searchParams"><span class="spanWidth">合同号 :</span>
          <el-input size="small" class="inputWidth" clearable v-model="query.contract_id"
                    @input="inputSearch"></el-input>
        </div>
      </div>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">科目名称 :</span>
          <el-select size="small" class="inputWidth" clearable v-model="query.course" placeholder="请选择"
                     @change="search">
            <el-option
                v-for="item in course"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">考试城市 :</span>
          <el-select size="small" class="inputWidth" clearable v-model="query.exam_city" placeholder="请选择"
                     @change="search">
            <el-option
                v-for="item in examCityOptions"
                :key="item.id"
                :label="item.exam_city"
                :value="item.exam_city">
            </el-option>
          </el-select>
        </div>
        <div class="searchParams"><span class="spanWidth">考试时间 :</span>
          <el-select size="small" class="inputWidth" clearable v-model="query.exam_date" placeholder="请选择"
                     @change="search">
            <el-option
                v-for="item in examDateOptions"
                :key="item.id"
                :label="item.exam_date"
                :value="item.exam_date">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-row class="searchRow">

        <div class="block" style="margin-left: 40px">
          <span style="font-size: 14px;margin-right: 10px;">考试日期 :</span>
          <el-date-picker
              v-model="query.exam_date_range"
              @change="search"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              size="small"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div class="block" style="margin-left: 40px">
          <span style="font-size: 14px;margin-right: 10px">激活日期 :</span>
          <el-date-picker
              v-model="query.active_date_range"
              @change="search"
              type="datetimerange"
              size="small"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd hh:mm:ss"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
          </el-date-picker>
        </div>
      </el-row>
      <div class="searchRow">
        <div class="searchParams"><span class="spanWidth">审核进度 :</span>
          <el-cascader
              class="inputWidth"
              size="small"
              @change="stateChange"
              v-model="state"
              :options="stateOptions"
              clearable></el-cascader>
          <!--                                                                        {{stateStr}}-->
        </div>
        <div class="searchParams"><span class="spanWidth">审核日期 :</span>
          <el-date-picker
              size="small"
              class="inputWidth"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              v-model="query.audit_date"
              @change="search"
          ></el-date-picker>
        </div>
        <div class="searchParams"><span class="spanWidth">备注 :</span>
          <el-input size="small" style="width: 300px" clearable v-model="query.detail"
                    @input="inputSearch"></el-input>
        </div>
      </div>

      <el-row class="searchRow">
        <el-col>
          <!--                    <el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>-->
          <!--                    <el-button type="primary" size="mini" @click="downDataVisible = true">导出<i-->
          <!--                            class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
          <el-button type="primary" size="mini" @click="downDataVisible = true">导出<i
              class="el-icon-upload el-icon--right"></i></el-button>
          <el-button size="mini" icon="el-icon-delete" @click="reset">重置</el-button>
        </el-col>
                        <el-dialog
                                title="导出数据"
                                width="50%"
                                :visible.sync="downDataVisible"
                        >
                            <div style="margin: 15px 0;"></div>
                            <div class="checkboxDiv">
                              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                              <div style="margin: 15px 0;display: flex;flex-wrap: wrap;justify-content: space-between"></div>
                              <el-checkbox-group style="line-height: 30px" v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox v-for="item in cities" :label="item" :key="item.value">{{item.value}}</el-checkbox>
                              </el-checkbox-group>
                            </div>
                            <div style="margin-top: 40px">
                                <el-button @click="downDataVisible = false">取消</el-button>
                                <el-button type="primary" :disabled="checkedCities.length > 0 ? false:true" @click="downData">确认
                                </el-button>
                            </div>
                        </el-dialog>
      </el-row>
    </el-card>
  </div>
</template>

<script>
const cityOptions = [
  {
    fileName: 'card_type_display',
    value: '证件类型'
  },
  {
    fileName: 'gender_display',
    value: '性别'
  },
  {
    fileName: 'course',
    value: '科目'
  },
  {
    fileName: 'org',
    value: '机构'
  },
  {
    fileName: 'name',
    value: '姓名'
  },
  {
    fileName: 'birthday',
    value: '出生日期'
  },
  {
    fileName: 'card_id',
    value: '证件号码'
  },
  {
    fileName: 'phone',
    value: '手机号码'
  },
  {
    fileName:'email',
    value:'邮箱'
  },
  {
    fileName:'province',
    value:'省份'
  },
  {
    fileName:'city',
    value:'城市'
  },
  {
    fileName:'address',
    value:'现居住址'
  },
  {
    fileName:'com_name',
    value:'单位名称'
  },
  {
    fileName:'grad_time',
    value:'毕业时间'
  },
  {
    fileName:'hig_edu',
    value:'最高学历'
  },{
    fileName:'work_age',
    value:'从业年限'
  },
  {
    fileName:'work_duty',
    value:'职务'
  },
  {
    fileName:'active_date',
    value:'激活时间'
  },
  {
    fileName:'exp_date',
    value:'到期时间'
  },
  {
    fileName:'exam_city',
    value:'考试城市'
  },
  {
    fileName:'exam_date',
    value:'考试时间'
  },
  {
    fileName:'gaodun_u',
    value:'学习账户'
  },
  {
    fileName:'gaodun_p',
    value:'学习密码'
  },
  {
    fileName:'exam_code',
    value:'准考证号'
  },
  {
    fileName:'add_time',
    value:'添加时间'
  }
];
import {examDate, org_list} from "../../request/api";

export default {
  name: "Search",
  props: {
    course: {
      type: Array
    },
    examTime: {
      type: Array
    }
  },
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true,
      orgList: [],
      certDisplayOptions: [
        {id: 1, name: 'ACCA职业资格证书'},
        {id: 2, name: 'AICPA职业资格证书'},
        {id: 3, name: 'ATHE国际薪税师能力水平评价证书二级（中级）'},
        {id: 4, name: 'ATHE国际薪税师能力水平评价证书三级（初级）'},
        {id: 5, name: 'CIMA职业资格证书'},
        {id: 6, name: 'CMA职业资格证书'},
        {id: 7, name: 'IFA职业资格证书'},
        {id: 8, name: 'IFA国际薪税师能力水平评价证书二级（中级）'},
        {id: 9, name: 'IFA国际薪税师能力水平评价证书三级（初级）'},
        {id: 10, name: '初级会计师职称证书'},
        {id: 11, name: '初级经济师职称证书'},
        {id: 12, name: '法律职业资格证书'},
        {id: 13, name: '高级会计师职称证书'},
        {id: 14, name: '高级经济师职称证书'},
        {id: 15, name: '企业人力资源管理师职业技能（一级）证书'},
        {id: 16, name: '企业人力资源管理师职业技能（二级）证书'},
        {id: 17, name: '企业人力资源管理师职业技能（三级）证书'},
        {id: 18, name: '企业人力资源管理师职业技能（四级）证书'},
        {id: 19, name: '企业人力资源管理师职业资格（一级）证书'},
        {id: 20, name: '企业人力资源管理师职业资格（二级）证书'},
        {id: 21, name: '企业人力资源管理师职业资格（三级）证书'},
        {id: 22, name: '企业人力资源管理师职业资格（四级）证书'},
        {id: 23, name: '税务师职业资格证书'},
        {id: 24, name: '薪酬管理职业技能（初级）证书'},
        {id: 25, name: '薪酬管理职业技能（中级）证书'},
        {id: 26, name: '薪酬管理职业技能（高级）证书'},
        {id: 27, name: '薪税师职业技能（一级）证书'},
        {id: 28, name: '薪税师职业技能（二级）证书'},
        {id: 29, name: '薪税师职业技能（三级）证书'},
        {id: 30, name: '薪税师职业技能（四级）证书'},
        {id: 31, name: '中国商业联合会薪税师能力水平评价证书二级（中级）'},
        {id: 32, name: '中国商业联合会薪税师能力水平评价证书三级（初级）'},
        {id: 33, name: '中级会计师职称证书'},
        {id: 34, name: '中级经济师职称证书'},
        {id: 35, name: '注册会计师职业资格证书'},
        {id: 0, name: '以上均无'}
      ],
      work_dutyList: [
        {
          name: "单位负责人/高级管理人员（董事长/总裁/副总裁等）",
          value:
              "单位负责人/高级管理人员（董事长/总裁/副总裁等）#Person in charge / Senior Management (Chairman / President / Vice President, etc.)",
        },
        {
          name: "事务所负责人/高级管理人员（董事长/权益合伙人/授薪合伙人等）",
          value:
              "事务所负责人/高级管理人员（董事长/权益合伙人/授薪合伙人等）#Head of the firm / Senior Management (Chairman / Equity Partners / Salaried Partners, etc.)",
        },
        {
          name: "人力资源部（薪酬总监岗及以上/薪税服务总监岗及以上）",
          value:
              "人力资源部（薪酬总监岗及以上/薪税服务总监岗及以上）#Human Resources Dept. (Payments Director Post and above/Payments and Tax Service Director Post and above)",
        },
        {
          name: "财务部（总监岗及以上）",
          value:
              "财务部（总监岗及以上）#Finance Dept. (Director Post and above)",
        },
        {
          name: "客服部/市场部（总监岗及以上）",
          value:
              "客服部/市场部（总监岗及以上）#Customer Service Dept. / Marketing Dept. (Director Post and above)",
        },
        {
          name: "业务部（总监岗及以上）",
          value:
              "业务部（总监岗及以上）#Business Dept. (Director Post and above)",
        },
        {
          name: "其他未列明部门（总监岗及以上）",
          value:
              "其他未列明部门（总监岗及以上）#Other Unspecified Departments (Director Post and above)",
        },
        {
          name: "人力资源部（薪酬经理岗/薪税服务经理岗）",
          value:
              "人力资源部（薪酬经理岗/薪税服务经理岗）#Human Resources Dept. (Payments Manager Post/Payments and Tax Service Manager Post)",
        },
        {
          name: "财务部（经理岗）",
          value:
              "财务部（经理岗）#Finance Dept. (Manager Post)",
        },
        {
          name: "客服部/市场部（经理岗）",
          value:
              "客服部/市场部（经理岗）#Customer Service Dept. / Marketing Dept.  (Manager Post)",
        },
        {
          name: "业务部（经理岗）",
          value:
              "业务部（经理岗）#Business Dept. (Manager Post)",
        },
        {
          name: "其他未列明部门（经理岗）",
          value:
              "其他未列明部门（经理岗）#Other Unspecified Departments (Manager Post)",
        },
        {
          name: "人力资源部（薪酬专员岗/薪税服务专员岗）",
          value:
              "人力资源部（薪酬专员岗/薪税服务专员岗）#Human Resources Dept. (Payments Specialist Post/Payments and Tax Service Specialist Post)",
        },
        {
          name: "财务部（专员岗）",
          value:
              "财务部（专员岗）#Finance Dept. (Specialist Post)",
        },
        {
          name: "客服部/市场部（专员岗",
          value:
              "客服部/市场部（专员岗）#Customer Service Dept. / Marketing Dept.  (Specialist Post)",
        },
        {
          name: "业务部（专员岗）",
          value:
              "业务部（专员岗）#Business Dept. (Specialist Post)",
        },
        {
          name: "其他未列明部门（专员岗）",
          value:
              "其他未列明部门（专员岗）#Other Unspecified Departments (Specialist Post)",
        },
        {
          name: "其他人员（在校学生-人力资源管理、工商管理、行政管理专业）",
          value:
              " 其他人员（在校学生-人力资源管理、工商管理、行政管理专业）#Others (Student-Major in HR Management, Business Administration, Administration）",
        },
        {
          name: "其他人员（在校学生-会计、税务、财务管理专业）",
          value:
              "其他人员（在校学生-会计、税务、财务管理专业）#Others (Student-Major in Accounting, Taxation, Financial management）",
        },
        {
          name: "其他人员（在校学生-其他专业）",
          value:
              "其他人员（在校学生-其他专业）#Others (Student-other majors）",
        },
        {
          name: "自由职业者",
          value:
              "自由职业者#Freelancers",
        }
      ],
      ind_typeList: [
        {value: 1, name: '人力资源与人力资本服务'},
        {value: 2, name: '集成电路'},
        {value: 3, name: '人工智能'},
        {value: 4, name: '软件与平台'},
        {value: 5, name: '生命科学'},
        {value: 6, name: '生物医药'},
        {value: 7, name: '医疗保健'},
        {value: 8, name: '航空与航天'},
        {value: 9, name: '汽车'},
        {value: 10, name: '化工'},
        {value: 11, name: '工业产品和服务'},
        {value: 12, name: '消费品'},
        {value: 13, name: '能源和自然资源'},
        {value: 14, name: '金融'},
        {value: 15, name: '基础建设和建筑产品'},
        {value: 16, name: '机械和设备'},
        {value: 17, name: '媒体'},
        {value: 18, name: '金属和矿业'},
        {value: 19, name: '私募基金'},
        {value: 20, name: '零售'},
        {value: 21, name: '高科技'},
        {value: 22, name: '电信'},
        {value: 23, name: '公用事业'},
        {value: 24, name: '教育'},
        {value: 25, name: '文化'},
        {value: 26, name: '其他'},
        {value: 27, name: '无'}
      ],
      cardOptions: [
        {id: 1, name: "居民身份证"},
        {id: 2, name: "护照"},
        {id: 3, name: "港澳台胞身份证"},
      ],
      com_typeList: [
        {value: 1, name: '企事业单位'},
        {value: 2, name: '人力资源服务机构'},
        {value: 3, name: '会计（税务、律师）事务所'},
        {value: 4, name: '金融机构（银行、证券、保险、 信托、基金等）'},
        {value: 5, name: '其他中介机构'},
        {value: 6, name: '院校'},
        {value: 7, name: '其他'}
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      arrParams: [],
      downOptions: [],
      downDataVisible: false,
      queryCopy: null,
      state: null,
      watchState: null,
      stateOptions: [
        {
          value: '<3',
          label: '机构一审',
          children: [
            {
              value: '<3',
              label: "待审"
            },
            {
              value: '>2',
              label: "已审"
            },
            // {
            //     value: '<3',
            //     label: "拒审"
            // }
          ]
        },
        {
          value: '3<n<7',
          label: '机构二审',
          children: [
            {
              value: '3<n<7',
              label: "待审"
            },
            {
              value: '>6',
              label: "已审"
            },
            // {
            //     value: '3<n<7',
            //     label: "拒审"
            // }
          ]
        },
        {
          value: '=3',
          label: '总部一审',
          children: [
            {
              value: '=3',
              label: "待审"
            },
            {
              value: '>3',
              label: "已审"
            },
            // {
            //     value: '=3',
            //     label: "拒审"
            // }
          ]
        },
        {
          value: '=7',
          label: '总部二审',
          children: [
            {
              value: '=7',
              label: "待审"
            },
            {
              value: '=8',
              label: "已审"
            },
            // {
            //     value: '=7',
            //     label: "拒审"
            // }
          ]
        }
      ],
      examCityOptions: [],
      examDateOptions: [],
      query: {
        phone: '',
        name: '',
        exam_city: '',
        exam_date: '',
        course: '',
        exam_date_range: null,
        active_date_range: null,
        last_py: '',
        first_py: '',
        user: '',
        email: '',
        card_id: '',
        birthday: null,
        card_type: '',
        grad_time: null,
        hig_edu: '',
        major: '',
        province: '',
        city: '',
        dis: '',
        org: '',
        exam_org: '',
        com_type: '',
        ind_type: '',
        com_name: '',
        work_duty: '',
        cert: '',
        work_age: 0,
        make_up_count: 0,
        contract_id: '',
        exam_code: '',
        detail: '',
        audit_date: ''
      }
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    //获取机构列表
    getOrgList() {
      if (this.$store.state.user_type == 3) {
        org_list().then(res => {
          this.orgList = [...res]
        })
      }
    },
    inputSearch() {
      clearTimeout(inputTimeout);
      let inputTimeout = setTimeout(() => {
        this.search()
      }, 500)
    },
    getExamDate() {
      examDate(this.query.course).then(res => {
        let examCityOption = res.filter((item, index) => {
          return res.findIndex(item1 => item1.exam_city == item.exam_city) == index
        })
        let examDateOption = res.filter((item, index) => {
          return res.findIndex(item1 => item1.exam_date == item.exam_date) == index
        })
        this.examDateOptions = examDateOption
        this.examCityOptions = examCityOption
      })
    },
    downData() {
      console.log(this.arrParams,this.checkedCities)
      this.$emit('downData', this.arrParams,this.checkedCities)
    },
    stateChange() {

    },
    search() {
      // console.log('this.query',this.query)
      // console.log('this.queryCopy',this.queryCopy)
      this.arrParams = [];
      for (let item in this.query) {
        if (this.queryCopy[item] != this.query[item]) {
          let obj = {};
          obj[item] = this.query[item];
          this.arrParams.push(obj);
          console.log('arrParams', JSON.parse(JSON.stringify(this.arrParams)))
        }
      }
      ;

      console.log('arrParams', this.arrParams)
      this.$emit('searchParams', this.arrParams);
    },
    reset() {
      this.state = null;
      this.query = {};
      this.$emit('reset');
    }
  },
  watch: {
    state() {
      // this.watchState = this.state[length];
      // console.log('this.watchState',this.watchState)
      // console.log('this.stateStr',this.stateStr);
      if (this.state != null) {
        let arr = [];
        for (let item of this.state) {
          arr.push(item)
        }
        this.watchState = arr[length];
      }
    },
    stateStr() {
      console.log('this.stateStr', this.stateStr)
      // this.query = JSON.parse(JSON.stringify(this.queryCopy));
      console.log('this.query 第一次', this.query);
      for (let item in this.query) {
        if (item.includes('state')) {
          delete this.query[item]
        }
      }
      let state = JSON.parse(this.stateStr);
      if (Array.isArray(state)) {
        for (let item of state) {
          for (let key in item) {
            this.query[key] = item[key]
          }
        }
      } else {
        for (let key in state) {
          this.query[key] = state[key]
        }
      }
      this.search();
    }
  },
  computed: {
    stateStr() {
      switch (this.watchState) {
        case '<3':
          return '{"state_lt":"3"}';
        case '>2':
          return '{"state_gt":"2"}';
        case '3<n<7':
          return '[{"state_gt":"3"},{"state_lt":"7"}]';
        case '>6':
          return '{"state_gt":"6"}';
        case '=3':
          return '{"state":"3"}';
        case '>3':
          return '{"state_gt":"3"}';
        case '=7':
          return '{"state":"7"}';
        case '=8':
          return '{"state":"8"}';
      }
      return null;
    }
  },
  created() {
    console.log('用户类型', this.$store.state.user_type)
    this.queryCopy = JSON.parse(JSON.stringify(this.query));
    this.getExamDate();
    this.getOrgList();
  }
}
</script>

<style scoped>
.checkboxDiv .el-checkbox {
  margin-right: unset;
}

.box-child {
  width: 130px;
}

.searchParams {
  display: flex;
  align-items: center;
  text-align: right;
  font-size: 14px;
}

.searchParams span {
  margin-right: 10px;
}

.inputWidth {
  width: 200px;
}

.spanWidth {
  width: 100px;
}

.searchRow {
  display: flex;
  margin-bottom: 10px;
}
</style>
